<template>
	<view class="notice-module-components" :style="[wrapStyle]" v-if="moduleData.length">
		<!-- 模式1 -->
		<view class="notice-module-1" v-if="mode == 1">
			<image class="notice-image" src="../../static/icon/message-icon-1.png"></image>
			<u-notice-bar
				class="notice-bar"
				type="none"
				padding="0"
				mode="vertical"
				:color="color"
				:list="moduleData"
				:font-size="fontSize"
				:duration="duration"
				:volume-icon="false"
				@click="handleClick"
			></u-notice-bar>
		</view>
		<!-- 模式2 -->
		<view class="notice-module-2" v-if="mode == 2">
			<view class="left-wrap">
				<u-badge size="mini" :count='moduleData.length' is-center></u-badge>
				<image class="notice-image" src="../../static/icon/message-icon-2.png"></image>
			</view>
			<u-notice-bar
				class="notice-bar"
				type="none"
				padding="0"
				mode="vertical"
				:color="color"
				:list="moduleData"
				:font-size="fontSize"
				:duration="duration"
				:volume-icon="false"
				@click="handleClick"
			></u-notice-bar>
		</view>
	</view>
</template>

<script>
import mixins from '@/mixins/components.js';
export default {
	name: 'notice-module',
	mixins: [mixins],
	props: {
		mode: {
			type: [Number, String],
			default: 1
		},
		fontSize: {
			type: [String, Number],
			default: '28rpx'
		},
		duration: {
			type: [String, Number],
			default: '2000'
		},
		color: {
			type: String,
			default: '#333333'
		}
	},
	data() {
		return {};
	},
	methods: {
		handleClick(index){
			this.$emit('click',index);
		}
	}
};
</script>

<style scoped lang="scss">
.notice-module-components {
	.notice-module-1 {
		width: 100%;
		height: 40rpx;
		display: flex;
		position: relative;
		align-items: center;
		padding-left: 150rpx;
		.notice-image {
			top: 0;
			left: 0;
			width: 100%;
			height: 40rpx;
			position: absolute;
		}
		.notice-bar{
			width: 100%;
		}
	}
	.notice-module-2{
		width: 100%;
		height: 70rpx;
		display: flex;
		padding: 0 36rpx;
		position: relative;
		align-items: center;
		border-radius: 35rpx;
		background-color: #deedf4;
		.left-wrap{
			flex-shrink: 0;
			margin-top: 16rpx;
			position: relative;
			margin-right: 24rpx;
			.notice-image {
				width: 52rpx;
				height: 40rpx;
			}
		}
		.notice-bar{
			width: 100%;
		}
	}
}
</style>
